Vanilla Form Manual v. 1.2

Vanilla Form - User Manual

Introduction

Thank you for using Vanilla Form. This manual shows you how easy is to integrate Vanilla Form with your website. Vanilla Form uses JavaScript instructions to send filled data to PHP file, which works on servers side. PHP file parses data and calls PHP native function mail(). Thanks for JavaScript Asynchronous Requests your website doesn't reload, which improves your User Experience. Vanilla Form doesn't use annoying captcha, but it has built-in anti bot protection.

Form is independent software which makes it fast, lightweight and scalable. You don't need to use 3-rd party libraries like jQuery. But if you want to, you can easily integrate it with any library you want.

Installation

Step 1

Update PHP File and point recipients e-mail address by editing TO_EMAIL constant. On to these email address all form inquires/messages will be send.


    // If is not empty it sets a header From in e-mail message (sets sender e-mail).
    // Note: some hosting servers can block sending e-mails with custom From field in header.
    //       If so, leave this field as empty.
    define('FROM_EMAIL', '');

    // Recipient's e-mail. To this e-mail messages will be sent.
    // e.g.: john@example.com
    // multiple recipients e.g.: john@example.com, andy@example.com
    define('TO_EMAIL', 'john@example.com');

After that upload this file on to your web page server. Remember the URL which stands for this file. To double check whether URL is valid open it in your web browser. You should see OK word on your screen. This means that URL to PHP file is correct and PHP configuration has been done properly.

Step 2

Upload on server and import Vanilla Form JavaScript file and CSS file into head section of your html document. Double check whether path to these files is set correctly.

Tip: Importing minified files will increase speed of loading your web page, due the size of this files is lower.

    <head>
        <!-- ...some head section content... -->
        <link rel="stylesheet" href="path/to/css/vanilla-form.min.css">
        <script src="path/to/css/vanilla-form.min.js"></script>
    </head>

Insert HTML Form markup into your website. Make sure that the action attribute in form tag has correct path to PHP file and the method attribute is set to post.


    <!-- Vanilla Form markup starts here -->
    <form action="standard-contact-form.php" method="post" class="vanilla-form" novalidate="novalidate">
        <!-- Left column -->
        <div class="column-50">
            <input type="text" name="name" placeholder="Your name" required="required">
            <input type="email" name="email" placeholder="Your e-mail" required="required">
        </div><!--
        Right column
        --><div class="column-50">
            <input type="tel" name="tel" placeholder="Phone">
            <label class="custom-select">
                <select name="department">
                    <option>Sales</option>
                    <option>Marketing</option>
                    <option>Customer Support</option>
                    <option>Other</option>
                </select><span><!-- fake select handler --></span>
            </label>
        </div>
        <div class="column-100">
            <div class="radio-set">
                Your sex:
                <label><input type="radio" name="sex" value="M"><span><!-- fake radio --></span> Male</label>
                <label><input type="radio" name="sex" value="F"><span><!-- fake radio --></span> Female</label>
            </div>
            <textarea name="message" placeholder="Type your message here..."></textarea>
            <label>
                <input type="checkbox" name="terms" value="true" required="required">
                <span><!-- fake checkbox --></span>
                <span class="wrapped-label">Yes, I accept the terms of use.</span>
            </label>
        </div>
        <div class="column-100 center">
            <input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
        </div>
        <footer class="notification-box"></footer>
    </form>
    <!-- Vanilla Form markup ends here -->

Step 3

Finally we need to initialize Vanilla From. Initialization needs to be done after form markup will be loaded. To bind a form element with Vanilla Form you can simply add following line into form tag of html markup which you have inserted before.


    onLoad="new VanillaForm(this)"

Now your html markup of form should looks like here (underlined text is a part that was modified):


    <!-- Vanilla Form markup starts here -->
    <form onLoad="new VanillaForm(this)" action="php/standard-contact-form.php" method="post" class="vanilla" novalidate="novalidate">
        <!-- Left column -->
        <div class="column-50">
            <input type="text" name="name" placeholder="Your name" required="required">
            <input type="email" name="email" placeholder="Your e-mail" required="required">
        </div><!--
        Right column
        --><div class="column-50">
            <input type="tel" name="tel" placeholder="Phone">
            <label class="custom-select">
                <select name="department">
                    <option>Sales</option>
                    <option>Marketing</option>
                    <option>Customer Support</option>
                    <option>Other</option>
                </select><span><!-- fake select handler --></span>
            </label>
        </div>
        <div class="column-100">
            <div class="radio-set">
                Your sex:
                <label><input type="radio" name="sex" value="M"><span><!-- fake radio --></span> Male</label>
                <label><input type="radio" name="sex" value="F"><span><!-- fake radio --></span> Female</label>
            </div>
            <textarea name="message" placeholder="Type your message here..."></textarea>
            <label>
                <input type="checkbox" name="terms" value="true" required="required">
                <span><!-- fake checkbox --></span>
                <span class="wrapped-label">Yes, I accept the terms of use.</span>
            </label>
        </div>
        <div class="column-100 center">
            <input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
        </div>
        <footer class="notification-box"></footer>
    </form>
    <!-- Vanilla Form markup ends here -->

Alternative form init

If you don't want to init Vanilla Form by using javascript in onLoad attribute of form tag, there is the second way to init Vanilla Form. To do this, you need to set an event listener for DOMContentLoaded event. You can paste following code snippet into your JS file.


    document.addEventListener("DOMContentLoaded", function () {
        var myForm;
        myForm = new VanillaForm(document.querySelector("form.vanilla"));
    });

That's all!

Field options

Setting proper types of input fields, mobile devices will turn on adequate virtual keyboard. All allowed types of input fields are described by HTML 5 standard. But these fields may be interesting for you:

To set input type just select one from the list above and implement it like in given example:


    <input type="number" name="age">
    <input type="phone" name="phone">
    <input type="text" name="name">
    <input type="email" name="email">
        
Tip: To see how given type of input will behave you should test it on mobile device.

Required field

To make field required set required attribute to input field.


    <input type="number" required="required" name="age">

Checkbox field checked as a default

To make checkbox field checked as a default you need to set checked attribute to input field.


    <input type="checkbox" checked="checked" name="terms">

Radio field checked as a default

Radio field is quite similar to checkbox field. To make it checked as a default you need to set checked attribute to input field. In given example Male option will be checked as a default.


    <label><input type="radio" name="sex" checked="checked" value="M"><span><!-- fake radio --></span> Male</label>
    <label><input type="radio" name="sex" value="F"><span><!-- fake radio --></span> Female</label>

Drop down / select menu with selected option as default

To make an options selected as a default you need to set selected attribute to option tag. In given example Customer support will be selected as default.


    <label class="custom-select">
        <select name="department">
            <option>Sales</option>
            <option>Marketing</option>
            <option selected="selected">Customer Support</option>
            <option>Other</option>
        </select><span><!-- fake select handler --></span>
    </label>

Custom messages or translation

Vanilla Form supports making translations and custom messages. It's really simple to do this. To create custom messages or translation assign proper message to form dictionary:


    document.addEventListener("DOMContentLoaded", function () {
        var myForm;
        myForm = new VanillaForm(document.querySelector("form.vanilla"));
        myForm.dict.markedAsSpamError = "Your message was marked as spam and was not sent! Fix your message!";
        myForm.dict.sendSuccess = "We have received your inquiry. Stay tuned, we’ll get back to you very soon.";
    });
        

Complete dictionary field reference:

Troubleshooting

Common issues and troubles were collected from buyer's feedback and summarized in this troubleshooting page.

If you are still in trouble and form doesn't work as you desire ask question on Comment Page on Envato Website or send me private message through this Contact Form - it's located on the bottom of right column.